<gm:page title="GregorConferenceMap" authenticate="true" onload="load()">

  <script>
    var geocoder = null;

    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
      }
    
  
}

    function showLocation() {
      var location = document.forms[0].q.value; 
    document.getElementById("blurb").innerHTML = location; 
      var map = google.mashups.getObjectById("map").getMap();
      geocoder.getLatLng(location,
        function(point) {
          if (point) {
            var marker = new GMarker(point);
            map.addOverlay(marker);
            map.setCenter(point, 7);
          }
        }
      );
    }
</script>

<table width="900">
  <tr valign="top">
    <td width="300">
      <div id="blurb"></div>
  	<form id="theform" action="#" onsubmit="showLocation(); return false;">
	<p> <b>Search for an address:</b>

	  <input name="q" value="" class="address_input" size="40" type="text"></input>
	  <input type="button" value="JavaScript alert" 
 onclick="showLocation()" /> 
	</p>
	</form><br/>
    </td>

    <td class="mainPanel">

      
      
        <gm:map id="mainMap" data="${Locations}" control="large"
            width="700px" height="500px" 
            lat="35.4607" lng="-12.6563" zoom="2" maptypes="true" create="true">
          <gm:handleEvent src="Locations"/>
         </gm:map>      
      
      
     
        
    </td>
    <td>
             <gm:list id="Locations" data="${app}/moo" template="LocationsTemplate">
          <gm:handleEvent src="mainMap"/>
        </gm:list> 
      
      </td>
  </tr>
</table>


<gm:template id="LocationsTemplate">
  <table style="width: 100%">
    <tr repeat="true">
      <td>
        <gm:text ref="atom:title"/>
      </td>
    </tr>
    <gm:create label="create"/>
  </table>
  
</gm:template>



</gm:page>